import React from 'react'
import ReactDom from 'react-dom'

const data=[
  {id:1,type:"a",name:"n"},
  {id:2,type:"b",name:"m"},
  {id:3,type:"c",name:"a"},
  {id:4,type:"c",name:"e"},
];

function UI(){

  const [t, setT] = React.useState('')

  const udata = !!t?data.filter(item=>{
    return item.type===t
  }):data;

  return <div>
    type: <input onBlur={(v)=>{ setT(v.target.value) }} />
    <table>
      <tr>
        <th>ID</th>
        <th>NAME</th>
        <th>TYPE</th>
      </tr>
      {udata.map(item=>{
        return <tr>
          <td>{item.id}</td>
          <td>{item.name}</td>
          <td>{item.type}</td>
        </tr>
      })}
    </table>
  </div>
}

ReactDom.render(<UI />, document.querySelector('#root'))
